<template>
    <a-modal title="模板列表" :visible="visible" :width="800" :confirmLoading="confirmLoading" :maskClosable="true" @ok="onOk" @cancel="onCancel" cancelText="取消" okText="确定">
        <a-table :columns="tableOption.columns" :dataSource="tableOption.dataSource" :rowSelection="tableOption.rowSelection" :loading="tableOption.loading">
        </a-table>
    </a-modal>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from "vue-property-decorator";
import nextApi from "@/api/nextApi";
@Component({
    name:'templateTable',
})
export default class extends Vue {
    @Prop({default:false}) visible!:boolean;
    @Prop({default:''}) materialRelevanceId!:string;

    @Watch('visible')
    onVisibleChange(val:boolean){
        if(val){
            this.getTableData()
        }
    }
    confirmLoading = false
    tableOption:any = {
        loading:false,
        columns:[
            {
                title:'模板名称',
                dataIndex:'templateName',
                align:'center',
            },
            {
                title:'编号',
                dataIndex:'templateId',
                align:'center',
            },
            {
                title:'产地',
                dataIndex:'placeOfOrigin',
                align:'center',
            },
            {
                title:'备注',
                dataIndex:'remark',
                align:'center',
            }
        ],
        dataSource:[],
        selectedRowKeys:[],

        rowSelection:{
            type:'radio',
            onChange:(selectedRowKeys:any,selectedRows:any)=>{
                this.tableOption.selectedRowKeys = selectedRowKeys;
            }
        }
    }
    async getTableData(){
        console.log(this.materialRelevanceId,'$$$$$')

        this.tableOption.loading = true
        let params = {
            materialRelevanceId:this.materialRelevanceId,
        }
        try{
            await nextApi.getTemplate(params,(res)=>{
                console.log(res)
                if(res.data.code === 312){
                    this.info(res.data.msg)
                    return
                }else{
                    if(res.data.data){
                        this.tableOption.dataSource = res.data.data
                        console.log( this.tableOption.dataSource)
                        this.tableOption.loading = false
                    }
                }
            })

        }finally {
            this.tableOption.loading = false
        }
    }
    info(e){
        console.log(e)
        const h = this.$createElement
        this.$error({
            title:'注意',
            content:h('h2',{},e),
            okText:'知道了',
            onOk:()=>{
                this.onCancel()
            }
        })
    }
    async getTemplateInfo(callback){
        let index = this.tableOption.selectedRowKeys
        let id = this.tableOption.dataSource[index].templateId
        console.log('当前选中的模板信息：',id)
        const res = await nextApi.getMedHerbList({templateId:id})
        callback(res.data)
    }
    pageChange(page:number,pageSize:number):void{
        this.tableOption.pagination.current = page;
        this.tableOption.pagination.pageSize = pageSize;
        this.getTableData();
    }
    onOk():void{
        this.confirmLoading = true
       this.getTemplateInfo((templateInfoDetail)=>{
           this.$emit('ok',templateInfoDetail)
           this.confirmLoading = false
       })
    }
    onCancel():void{
        this.$emit('cancel');
   }
}


</script>

<style scoped lang="scss">

</style>
